<template>
  <div class="header">
    <div class="content-wrapper">
      <div class="logo">
        <img :src="seller.avatar"/>
      </div>
      <div class="content">
        <div class="title">
          <img src="./images/brand@2x.png">
          <span class="name">{{seller.name}}</span>
        </div>
        <div class="description">{{seller.description}}/{{seller.deliveryTime}}分钟送达</div>
        <div class="supports">
          <img src="./images/decrease_1@2x.png"/>
          <span>{{seller.supports[0].description}}</span>
        </div>
      </div>
      <div class="supports-count">
        <a href="#" @click.prevent="showMask(true)">{{seller.supports.length}}个</a><i class="iconfont icon-zuoyoujiantou"></i>
      </div>
    </div>
    <div class="bulletin">
      <a @click.prevent="showMask(true)">
        <img src="./images/bulletin@2x.png">
        <span class="">{{seller.bulletin}}</span>
        <i class="iconfont icon-zuoyoujiantou"></i>
      </a>
    </div>
    <div class="bg">
      <img :src="seller.avatar"/>
    </div>
    <transition name="bounce">
      <v-mask v-if="maskVisible" :seller="seller" @close="showMask(false)"></v-mask>
    </transition>
  </div>
</template>

<script>
    import mask from './mask.vue'
    export default {
      components:{
        "v-mask": mask
      },
      props:{
        seller: {
          type: Object,
          required: true
        }
      },
      data:function () {
          return {
            maskVisible: false
          }
      },
      computed: {
      },

      methods: {
        showMask: function (show) {
          this.maskVisible = show;
        }
      }
    }
</script>

<style lang="scss" scoped>
  .header{
    background-color: rgba(7,17,27,0.5);
    position: relative;
    color: #fff;
    line-height: 0;
    font-size: 0;

    .content-wrapper{
      padding: 24px 12px 18px 24px;
      font-size: 0;
      position: relative;

      .logo {
        display: inline-block;
        overflow: hidden;

        width: 64px;
        height: 64px;
        font-size: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .content{
        display: inline-block;
        overflow: hidden;
        margin-left: 12px;

        .title{
          padding-bottom: 12px;
          img{
            width: auto;
            height: 16px;
          }
          .name{
            margin-left: 6px;
            font-size: 16px;
            line-height: 1;
            font-weight: bold;

            display: inline-block;
            overflow: hidden;
          }
        }
        .description{
          font-size: 12px;
          line-height: 1;
          padding-bottom: 6px;
        }

        .supports{
          padding-top: 6px;

          img{
            height: 12px;
            width: auto;
          }
          span{
            margin-left: 6px;
            display: inline-block;
            overflow: hidden;
            font-size: 12px;
            line-height: 1;
          }
        }
      }

      .supports-count{
        position: absolute;
        right: 12px;
        bottom: 18px;
        overflow: hidden;

        padding: 0 12px;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 15px;
        line-height: 24px;
        height: 24px;

        a {
          color: #fff;
          font-size: 10px;
        }
        i{
          font-size: 10px;
          margin-left: 2px;
        }
      }
    }

    .bulletin{
      white-space: nowrap;
      overflow: hidden;
      text-overflow:ellipsis;
      line-height: 24px;
      height: 24px;
      font-size: 12px;
      background-color: rgba(7,17,27,0.2);
      padding-right: 21px;

      position: relative;

      img{
        margin-left: 10px;
        width: auto;
        height: 12px;
        vertical-align: middle;
      }

      span{
        font-size: 12px;
        line-height: 1;
        margin-left: 6px;
        vertical-align: text-bottom;
      }

      i{
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin-right: 10px;
      }

      a{
        color: #fff;
      }
    }

    .bg{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      font-size: 0;
      filter: blur(10px);

      img{
        width: 100%;
        height: 100%;
      }
    }

    .bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
  }
</style>
